<script setup>
import {reactive} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const info = reactive({
  list:[],
  dialogVisible:false, //弹窗
  form:{},  //表单数据
  isAdd:true, //添加或者修改的标识，true增加 false 修改
  pageNum:1, //分页-页码
  pageSize:5,//分页-页大小
  total:0, //总条数
})


const load = () => {
  axios.get('http://127.0.0.1:8080/department',{
    params:{
      pageSize:info.pageSize,
      pageNum:info.pageNum,
      deptName:info.form.deptName
    }
  }).then(res => {
    console.log(res)
    info.list = res.data.list
    //分页
    info.total = res.data.total
  })
}
load();

const add = () => {
  info.form={}
  info.isAdd = true
  info.dialogVisible = true
}

//保存或更新数据
const saveOrUpdate = () => {

  axios({
    method: info.isAdd?'post':'put',
    url: 'http://127.0.0.1:8080/department',
    data: info.form
  }).then(res => {
    if(res.data === true){
      ElMessage({
        message: '操作成功.',
        type: 'success',
      })
    }else{
      ElMessage.error('操作失败，请联系管理员.')
    }
    //关闭当前的对话框
    info.dialogVisible = false
    //清除当前已经填写的表单数据
    info.form = {}
    //重新加载一下最新的数据
    load()
  })

}

//修改弹窗
const handleEdit = (id) =>{
  info.isAdd = false
  //根据传递的id去后端查询最新数据
  axios.get('http://127.0.0.1:8080/department/'+id,{}).then(res => {
    info.form = res.data
  })
  //弹窗打开
  info.dialogVisible = true
}

//删除方法
const handleDelete = (id) =>{
  axios.delete('http://127.0.0.1:8080/department/'+id,{}).then(res => {
    if(res.data === true){
      ElMessage({
        message: '删除成功.',
        type: 'success',
      })
    }else{
      ElMessage.error('删除失败，请联系管理员.')
    }

    //刷新数据
    load();
  })
}

//------------分页开始-------------
//改变页大小
const handleSizeChange = (val) => {
  info.pageSize = val
  load();
}
const handleCurrentChange = (val) => {
  info.pageNum = val
  load();
}
//------------分页结束-------------
</script>

<template>
  <el-button type="danger" plain @click="add()">增加部门</el-button>
  <!-- 快捷查询 -->
  <br><br>
  <el-form :inline="true" :model="info.form" class="demo-form-inline">
    <el-form-item label="部门名称">
      <el-input v-model="info.form.deptName" placeholder="模糊查询" clearable />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="load">快捷查询</el-button>
    </el-form-item>
  </el-form>

  <!-- 表格数据 -->
  <el-table :data="info.list" border  style="width: 100%">
    <el-table-column align="center" type="index" label="序号" width="100" />
    <el-table-column align="center" prop="deptName" label="部门名称" width="200" />
    <el-table-column align="center" prop="deptAddress" label="部门地址" width="280" />
    <el-table-column align="center" prop="deptRemark" label="部门备注" width="380" />
    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row.deptId)">修改</el-button>
        <el-popconfirm @confirm="handleDelete(scope.row.deptId)" title="你确定删除么?">
          <template #reference>
            <el-button size="small" type="danger" >删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <br>
  <el-pagination
      v-model:current-page="info.pageNum"
      v-model:page-size="info.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :size="size"
      :disabled="disabled"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="info.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  <!-- 弹窗 -->
  <el-dialog
      v-model="info.dialogVisible"
      :title="info.isAdd?'增加部门':'修改部门'"
      width="50%"
      :before-close="handleClose"
  >

    <el-form :model="info.form" label-width="auto" style="max-width: 80%;padding-left: 60px">
      <el-form-item label="部门名称">
        <el-input v-model="info.form.deptName" />
      </el-form-item>
      <el-form-item label="部门地址">
        <el-input type="textarea" v-model="info.form.deptAddress" />
      </el-form-item>
      <el-form-item label="部门备注">
        <el-input type="textarea" v-model="info.form.deptRemark" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">

        <el-button type="primary" @click="saveOrUpdate()">
          保存信息
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>

</style>